<template>
    <div class="header">
      <div class="center">护肤品管理系统</div>
      <div class="right">
        <span><el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar></span>&nbsp;&nbsp;&nbsp;
        <span class="welcome">欢迎您&nbsp;&nbsp;{{uname}}</span>&nbsp;&nbsp;&nbsp;
        <button class="logout" @click="logout">退出</button>
      </div>
    </div>
  </template>
  
  <script>
  export default {
      name:'SysHeader',
      data(){
          return{
            
          }
      },
      methods:{
        logout(){
          sessionStorage.removeItem('token')
          this.$store.dispatch('logout')
          this.$router.push('/login')
        }
      },
      computed:{
        uname(){
          return this.$store.state.login.uname
        }
      }
  }
  </script>
  
  <style lang='less' scoped>
    .header{
      box-sizing: border-box;
      width: 100%;
      height: 3rem;
      // background: url(../../assets/images/background.jpg),no-repeat;
      background-color: green;
      color:#fff;
      position: relative;
      .center{
        font-size: 1rem;
        width: 8rem;
        line-height: 3rem;
        margin: auto;
      }
      .right{
        position: absolute;
        top: 0.24rem;
        right: 1rem;
        font-size:0.5rem ;
        display: flex;
        justify-content: center;
        align-items: center;
        .logout{
          font-size:0.5rem ;
          width: 2.5rem;
          height: 1.5rem;
        }
      }
    }
  </style>